{% extends "base.html" %}
{% block title %}添加客户{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0"><i class="bi bi-person-plus"></i> 添加新客户</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('admin_add_customer') }}" id="customerForm">
                    <!-- 客户姓名 -->
                    <div class="mb-3">
                        <label for="customer_name" class="form-label">
                            <span class="text-danger">*</span> 客户姓名
                        </label>
                        <input type="text" class="form-control" id="customer_name" name="customer_name"
                               value="{{ form_data.customer_name if form_data }}" required>
                        <div class="invalid-feedback">请输入客户姓名</div>
                    </div>

                    <!-- 身份证号 -->
                    <div class="mb-3">
                        <label for="id_card" class="form-label">
                            <span class="text-danger">*</span> 身份证号
                        </label>
                        <input type="text" class="form-control" id="id_card" name="id_card"
                               value="{{ form_data.id_card if form_data }}"
                               pattern="\d{17}[\dXx]"
                               title="请输入18位身份证号码（最后一位可以是X）"
                               maxlength="18" required>
                        <div class="invalid-feedback">请输入有效的18位身份证号码</div>
                        <small class="text-muted">格式：18位数字，最后一位可以是X</small>
                    </div>

                    <!-- 联系电话 -->
                    <div class="mb-3">
                        <label for="phone" class="form-label">
                            <span class="text-danger">*</span> 联系电话
                        </label>
                        <input type="tel" class="form-control" id="phone" name="phone"
                               value="{{ form_data.phone if form_data }}"
                               pattern="\d{11}"
                               title="请输入11位手机号码"
                               maxlength="11" required>
                        <div class="invalid-feedback">请输入有效的11位手机号码</div>
                    </div>

                    <!-- 联系地址 -->
                    <div class="mb-3">
                        <label for="address" class="form-label">联系地址</label>
                        <textarea class="form-control" id="address" name="address" rows="2">{{ form_data.address if form_data }}</textarea>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('admin_customers') }}" class="btn btn-secondary me-md-2">
                            <i class="bi bi-arrow-left"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// 表单验证
document.getElementById('customerForm').addEventListener('submit', function(event) {
    const form = event.target;
    if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
    }

    // 添加Bootstrap的验证样式
    form.classList.add('was-validated');

    // 自定义身份证验证
    const idCard = document.getElementById('id_card');
    const idCardPattern = /^\d{17}[\dXx]$/;
    if (!idCardPattern.test(idCard.value)) {
        idCard.setCustomValidity('请输入有效的18位身份证号码');
    } else {
        idCard.setCustomValidity('');
    }

    // 自定义手机号验证
    const phone = document.getElementById('phone');
    const phonePattern = /^\d{11}$/;
    if (!phonePattern.test(phone.value)) {
        phone.setCustomValidity('请输入有效的11位手机号码');
    } else {
        phone.setCustomValidity('');
    }
});
</script>
{% endblock %}

{% endblock %}